<% if (props.ui === 'bootstrap') { -%>
.fa {
  vertical-align: middle;
}
<% } else if (props.ui === 'material') { -%>
.mat-progress-spinner {
  display: inline-block;
  vertical-align: middle;
}

.message {
  margin-left: 0.5em;
}
<% } else if (props.ui === 'raw') { -%>
.loader {
  text-align: center;
}

.spinner {
  vertical-align: middle;
  width: 3em;
  height: 3em;
  margin: 1em auto;
  border-radius: 100%;
  background-color: #333;
  animation: scaleout 1s infinite ease-in-out;
}

@keyframes scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}
<% } -%>
